<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
      #view{}
      #view{} .imgbox{float:left;position:relative;width:250px;height: 150px;margin-left: 10px;margin-top: 10px;
      padding:5px;border:solid 1px red;border-radius: 5px;;}
      #view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
      width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
      #view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
    </style>
<title>视频编辑</title>
</head>
<body>

<div class="pd-20">
	<form action="/baby/process/updateProcess" method="post" enctype="multipart/form-data"  class="form form-horizontal form-votes" id="form" >
	 <input type="hidden" name="key" id="sid" value="">
		<div class="row cl">
			<label class="form-label col-1">视频名称:</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频名称" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-1">视频地址：</label>
			<div class="formControls col-3">
				<input type="text" class="input-text" value="" placeholder="视频地址" id="videoUrl" name="videoUrl">
			</div>
		</div>

		<div class="row cl">
            <label class="form-label col-1">视频简介:</label>
            <div class="formControls col-10">
			     <textarea class="textarea" name="introduce" id="introduce"></textarea>
            </div> 
		</div>

        <div class="row cl">
            <label class="form-label col-1">视频图片:</label>
            <div class="formControls col-10">
                <input type="file" name="file" id="file"   nullmsg="请上传图片"  onchange="load(this)"  accept="image/*" class='myfile'>
                请选择jpg,png, jpeg类型的图片
                <div id="view"></div>
            </div> 
        </div>


		 <div class="row cl">
			<div class="col-10 col-offset-1">
				<input type="submit" class="btn btn-primary radius" name="submit"  class="submit" />
			</div>
		</div>

	</form>
</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script src="js/jquery-form.js" type="text/javascript"></script>
<script src="js/toolUtil.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="js/messages_zh.min.js" ></script>
<script type="text/javascript" src="js/rule.js" ></script>

<script>
	$(function() {
		$.ajax({
			url: '/baby/process/getProcess', // 跳转到 action  
			data: {
				key: ''
			},
			type: 'post',
			cache: false,
			dataType: 'json',
			success: function(data) {
				console.log(data);
				if(data.code == "2000") {
					var str = data.data[0];
					$("#name").val(str.title);
					$("#videoUrl").val(str.videoUrl);
					$("#introduce").val(str.introduce);
					$("#sid").val(str.sid);

					var imgbox = $('<div></div>');
					imgbox.addClass('imgbox');
					$('#view').append(imgbox);
					var imgs = $('<input type="image" />');
					var divstr = $('<div style="float:right" class="btn btn-secondary radius delimg" onclick="delimg(\'' + str.img.imageUrl + '\');">删除</div> </div>');
					imgs.attr('name', 'img');
					imgs.attr('src', str.img.realPicUrl);
					$(".imgbox").append(imgs);
					$(".imgbox").append(divstr);

				} else if(data.code == "5001") {
					alert(data.message);
					window.parent.location.href = 'http://localhost:8080/baby/resource/admin/login.html'
					console.log(data);

				}
			},
			error: function() {
				// view("异常！");  
				alert("异常！");
			}
		});
	})

	//提交修改
	function sub() {
		var sid = $("#sid").val();
		var name = $("#name").val();;
		var videoUrl = $("#videoUrl").val();
		var introduce = $("#introduce").val();
		var files = $("#file").val();
		if(files == '') {
			files = null;
		}
alert(sid);
return
		$.ajax({
			url: '/process/updateProcess', // 跳转到 action  
			data: {
				key: getQueryString('sid'),
				title: name,
				videoUrl: videoUrl,
				introduce: introduce,
				file: files
			},
			type: 'post',
			cache: false,
			dataType: 't',
			success: function(data) {
				console.log(data);
				if(data.code == "2000") {
					alert(data.message);

				} else if(data.code == "5001") {
					alert(data.message);
					window.parent.location.href = 'http://localhost:8080/baby/resource/admin/login.html'
					console.log(data);

				}
			},
			error: function() {
				// view("异常！");  
				alert("异常！");
			}
		});

	}

	$('body').on('click', '.close', function() {
		$(this).parent('.imgbox').remove();
	});

	$(document).ready(function() {

		$('#form').ajaxForm(function(data) {

			//  alert(data);//弹出ajax请求后的回调结果，data回调数据 onclick="sub()"
			if(data.code == "2000") {
				alert(data.message);
				window.location.href = 'votes-list.html'
					//  console.log(data);  
					//setCookie("username",data.data.userName);

				// window.location.reload();   
			} else {
				alert(data.message);
				console.log(data);
			}
		});

	});

	function load(file) {
		var num = 1;
		if(file.files) {
			$('.imgbox').remove()
			var reader = new FileReader();
			reader.readAsDataURL(file.files[0]);
			reader.onload = function(evt) {
				var imgbox = $('<div></div>');
				imgbox.addClass('imgbox');
				$('#view').append(imgbox);

				var imgs = $('<input type="image" />');
				imgs.attr('name', 'mum' + num);
				num++;
				imgs.appendTo(imgbox);
				imgs.attr('src', evt.target.result);
			}
		}
	}

	function delimg(id) {

		$.ajax({
			url: '/baby/uploadImg/deletePic', // 跳转到 action  
			data: {
				key: id
			},
			type: 'get',
			cache: false,
			dataType: 'json',
			success: function(data) {
				// console.log(data);
				if(data.code == "2000") {
					alert(data.message);
					window.location.reload();
				} else {
					alert(data.message);
				}
			},
			error: function() {
				alert("异常！");
			}
		});

	}
</script>
</body>
</html>